<template>
  
  <div 
    class="thumb"
    @mousedown="handleClick"
    v-contextmenu="contextmenusThumbnails"
  >
    <div class="thumb-item"></div> 
  </div>
</template>
<script lang="ts" setup>
// import ContextmenuComponent from '@/components/ContextmenuComponent.vue';

// eslint-disable prettier/prettier
interface ContextMenu {
  text?: string
  subText?: string
  divider?: boolean
  handler?: (el: HTMLElement) => void
}
// eslint-disable prettier/prettier
const contextmenusThumbnails: ContextMenu[] = [
  {
    text: '剪切',
    subText: 'Ctrl + X',
    handler: () => {
      console.log('剪切')
    },
  },
  {
    text: '复制',
    subText: 'Ctrl + C',
    handler: () => {
      console.log('剪切')
    },
  },
  {
    text: '粘贴',
    subText: 'Ctrl + V',
    handler: () => {
      console.log('剪切')
    },
  },
  {
    text: '全选',
    subText: 'Ctrl + A',
    handler: () => {
      console.log('剪切')
    },
  },
  { divider: true },
  {
    text: '新建页面',
    subText: 'Enter',
    handler: () => {
      console.log('剪切')
    },
  },
  {
    text: '复制页面',
    subText: 'Ctrl + D',
    handler: () => {
      console.log('剪切')
    },
  },
  {
    text: '删除页面',
    subText: 'Delete',
    handler: () => {
      console.log('剪切')
    },
  },
  { divider: true },
  {
    text: '从当前放映',
    subText: 'Shift + F5',
    handler: () => {
      console.log('剪切')
    },
  },
]
const handleClick = (event: any) => {
  console.log(event, 'event')
   
}
</script>
<style lang="scss">
  .thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
  .thumb-item {
    width: 100vw;
    height: 100vh;
    // background-color: aqua;
  }
  
}
</style>
